<template>
  <div class="personal layout-pd">
    <el-row>
      <!-- 商品信息 -->
      <el-col  :xs="24" :sm="16">
        <el-card shadow="hover"   header="商品信息">
          <div class="personal-user">
            <div class="personal-user-right">
              <el-row>
                <el-col :span="24">
                  <el-row>
                    <el-col :xs="24" class="personal-item mb12">
                      <div class="personal-item-label">产品类型：</div>
                      <div class="personal-item-value">
                        <el-text size="small">黄金</el-text>
                      </div>
                    </el-col>
                    <el-col :xs="24" class="personal-item mb12">
                      <div class="personal-item-label">周期：</div>
                      <div class="personal-item-value">
                        <el-text size="small">1年</el-text>
                      </div>
                    </el-col>
                    <el-col :xs="24" class="personal-item mb12">
                      <div class="personal-item-label">价格：</div>
                      <div class="personal-item-value">
                        <el-text size="small">￥600</el-text>
                      </div>
                    </el-col>
                  </el-row>
                </el-col>

              </el-row>
            </div>
          </div>
        </el-card>
      </el-col>
      <!-- 订单详情-->
<!--      <el-col :xs="24" :sm="8" class="pl15 personal-info">-->
<!--        <el-card shadow="hover">-->
<!--          <div class="order-total">-->
<!--            <el-input type="text"  v-model="coupon" maxlength="10"   placeholder="优惠券?"/>-->
<!--&lt;!&ndash;            <el-button style="margin-left: 10px" size="default" type="primary">验证</el-button>&ndash;&gt;-->
<!--            <el-button type="primary" loading>-->
<!--              <template #loading>-->
<!--                <div class="custom-loading">-->
<!--                  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" style="margin-right: 4px" width="18" height="18">-->
<!--                    <path fill="none" d="M0 0h24v24H0z"/>-->
<!--                    <path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm3 13.5l-5 5-3.5-3.5 1.41-1.41L10 15.17l3.59-3.59L15 11.5l-3 3z"/>-->
<!--                  </svg>-->

<!--                </div>-->
<!--              </template>-->
<!--              验证-->
<!--            </el-button>-->
<!--          </div>-->

<!--          <div class="order-total-detail">-->
<!--            <div ><el-text>订单总额</el-text></div>-->
<!--            <div style="display: flex;margin-top: 20px">-->
<!--              <div style="flex: 1">商品名称</div>-->
<!--              <div>价格</div>-->
<!--            </div>-->
<!--            <el-divider />-->
<!--            <div><el-text>总计</el-text></div>-->
<!--            <div style="margin-top: 20px"><el-text size="large" tag="b">￥300.00</el-text></div>-->
<!--            <el-button style="width: 100%;margin-top: 20px"  color="#409eff">-->
<!--              <SvgIcon name="ele-CircleCheck" />-->
<!--              下单</el-button>-->
<!--          </div>-->
<!--        </el-card>-->
<!--      </el-col>-->
      <el-col :xs="24" :sm="8" class="pl15 personal-info">
        <el-card shadow="hover">
          <div class="order-total">
            <el-input type="text"  v-model="coupon" maxlength="10"   placeholder="优惠券?"/>
            <!--            <el-button style="margin-left: 10px" size="default" type="primary">验证</el-button>-->
            <el-button type="primary" loading>
              <template #loading>
                <div class="custom-loading">
                  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" style="margin-right: 4px" width="18" height="18">
                    <path fill="none" d="M0 0h24v24H0z"/>
                    <path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm3 13.5l-5 5-3.5-3.5 1.41-1.41L10 15.17l3.59-3.59L15 11.5l-3 3z"/>
                  </svg>

                </div>
              </template>
              验证
            </el-button>
          </div>
          <div class="order-total-detail">
            <div>订单总额</div>
            <div style="height: 50px;line-height: 50px">
              <div style="width: 50%;float: left">商品名称</div>
              <div style="width: 50%;float: left;text-align: right">￥300.00</div>
            </div>
            <el-divider />
          </div>
        </el-card>
      </el-col>
      <!-- 订单信息 -->
      <el-col :xs="24" :sm="16">
        <el-card shadow="hover" class="mt15" header="订单信息">
          <div class="personal-user">
            <div class="personal-user-right">
              <el-row>
                <el-col :span="24">
                  <el-row>
                    <el-col :xs="24" class="personal-item mb12">
                      <div class="personal-item-label">订单号：</div>
                      <div class="personal-item-value">
                        <el-text size="small">202404110123457583314888</el-text>
                      </div>
                    </el-col>
                    <el-col :xs="24" class="personal-item mb12">
                      <div class="personal-item-label">创建时间：</div>
                      <div class="personal-item-value">
                        <el-text size="small">2024.04.11 15:58:11</el-text>
                      </div>
                    </el-col>

                  </el-row>
                </el-col>

              </el-row>
            </div>
          </div>
        </el-card>
      </el-col>
      <!-- 支付方式-->
      <el-col :xs="24" :sm="16">
        <el-card shadow="hover" class="mt15" header="支付方式">

          <el-row :gutter="15" class="personal-recommend-row">
            <el-col :sm="32" v-for="(v, k) in pay_method_list" :key="k" @click="clickPay(k)"
                    class="personal-recommend-col">
              <div class="personal-recommend" :style="{ 'background-color': v.bg,'border':v.border }">
                <img class="pay-logo" :src="v.icon">
                <div class="personal-recommend-auto">
                  <div>{{ v.title }}</div>
                  <div class="personal-recommend-msg">{{ v.desc }}</div>
                </div>
              </div>
            </el-col>
          </el-row>
        </el-card>
      </el-col>

    </el-row>
  </div>
</template>

<script setup lang="ts">
import {reactive, ref} from 'vue'

const pay_method_list = reactive([
      {
        title: '支付宝',
        desc: '手续费10%',
        border: '',
        bg: 'rgba(64,158, 2550,0.4)',
        icon: '/src/assets/alipay.png',
        iconColor: '#64d89d'
      },
      {
        title: '微信',
        desc: '手续费10%',
        border: '',
        bg: 'rgba(64,158, 2550,0.4)',
        icon: '/src/assets/wechat_pay.png',
        iconColor: '#F86C6B',
      },
    ]
)

const clickPay = (index) => {
  pay_method_list.map((item, _index) => {
    item.border = '';
    if (_index == index) {
      item.border = '2px solid #686565';
    }
  });

}
const coupon = ref('')

</script>

<style scoped lang="scss">
@import '../../../theme/mixins/index.scss';

.personal {
  .personal-user {
    height: 130px;
    display: flex;
    align-items: center;

    .personal-user-left {
      width: 100px;
      height: 130px;
      border-radius: 3px;

      :deep(.el-upload) {
        height: 100%;
      }

      .personal-user-left-upload {
        img {
          width: 100%;
          height: 100%;
          border-radius: 3px;
        }

        &:hover {
          img {
            animation: logoAnimation 0.3s ease-in-out;
          }
        }
      }
    }

    .personal-user-right {
      flex: 1;
      padding: 0 15px;

      .personal-title {
        font-size: 18px;
        @include text-ellipsis(1);
      }

      .personal-item {
        display: flex;
        align-items: center;
        font-size: 13px;

        .personal-item-label {
          color: var(--el-text-color-secondary);
          @include text-ellipsis(1);
        }

        .personal-item-value {
          @include text-ellipsis(1);
        }
      }
    }
  }

  .personal-info {
    .personal-info-more {
      float: right;
      color: var(--el-text-color-secondary);
      font-size: 13px;

      &:hover {
        color: var(--el-color-primary);
        cursor: pointer;
      }
    }

    .personal-info-box {
      height: 130px;
      overflow: hidden;

      .personal-info-ul {
        list-style: none;

        .personal-info-li {
          font-size: 13px;
          padding-bottom: 10px;

          .personal-info-li-title {
            display: inline-block;
            @include text-ellipsis(1);
            color: var(--el-text-color-secondary);
            text-decoration: none;
          }

          & a:hover {
            color: var(--el-color-primary);
            cursor: pointer;
          }
        }
      }
    }
  }

  .personal-recommend-row {
    margin-top: 20px;

    .pay-logo {
      position: absolute;
      right: 70px;
      top: 20px;
    }

    .personal-recommend-col {
      .personal-recommend {
        position: relative;
        height: 100px;
        border-radius: 10px;
        overflow: hidden;
        cursor: pointer;
        margin-top: 10px;

        &:hover {
          i {
            right: 0px !important;
            bottom: 0px !important;
            transition: all ease 0.3s;
          }
        }

        i {
          position: absolute;
          right: -10px;
          bottom: -10px;
          font-size: 70px;
          transform: rotate(-30deg);
          transition: all ease 0.3s;
        }

        .personal-recommend-auto {
          padding: 15px;
          position: absolute;
          left: 0;
          top: 5%;
          color: var(--next-color-white);

          .personal-recommend-msg {
            font-size: 12px;
            margin-top: 10px;
          }
        }
      }
    }
  }

}

.order-total {
  height: 80px;
  background-color: #64d89d;
  display: flex;
  align-items: center;
  padding: 20px;
  border-radius: 6px;
  :deep(.el-input__wrapper) {
    padding: 0px !important;
  }
  :deep(.el-input__inner){
    background-color: #64d89d;
  }
}
.order-total-detail {
  background-color: #64d89d;
  align-items: center;
  padding: 20px;
  border-radius: 6px;
  margin-top: 20px;
  display: block;
}
</style>
